import { ScrollView, StyleSheet } from 'react-native';
import { useLocalSearchParams, Stack } from 'expo-router';
import { Text, View } from '@/components/Themed';
import { Image } from 'expo-image';

export default function NewsDetailScreen() {
  const { id, title } = useLocalSearchParams();

  const newsDetail = {
    title: title as string,
    publishTime: '2024-03-10 14:30',
    author: '张记者',
    source: '科技日报',
    readCount: 2341,
    content: `人工智能技术正在深刻改变着我们的生活方式。最新研究显示，AI在医疗诊断领域取得重大突破，准确率已达到95%以上。

专家表示，这项技术将为偏远地区的医疗资源不足问题提供新的解决方案。通过AI辅助诊断系统，基层医院也能提供高质量的初步诊断服务。

此外，AI技术在教育、交通等领域也展现出巨大潜力。例如：
• 智能教育系统可以为学生提供个性化学习方案
• 自动驾驶技术大幅提升道路安全性
• 智能城市管理提高资源利用效率

未来，随着技术的不断进步，AI将在更多领域发挥重要作用。`,
    images: ['https://picsum.photos/800/400?random=1', 'https://picsum.photos/800/400?random=2', 'https://picsum.photos/800/400?random=3'],
    tags: ['人工智能', '科技创新', '医疗科技'],
  };

  return (
    <>
      <Stack.Screen options={{ title: title as string }} />
      <ScrollView style={styles.container}>
        <Image source={newsDetail.images[0]} style={styles.headerImage} />
        <View style={styles.content}>
          <Text style={styles.title}>{newsDetail.title}</Text>

          <View style={styles.meta}>
            <View style={styles.metaLeft}>
              <Text style={styles.source}>{newsDetail.source}</Text>
              <Text style={styles.dot}>·</Text>
              <Text style={styles.author}>{newsDetail.author}</Text>
            </View>
            <Text style={styles.time}>{newsDetail.publishTime}</Text>
          </View>

          <View style={styles.tags}>
            {newsDetail.tags.map((tag, index) => (
              <Text key={index} style={styles.tag}>
                {tag}
              </Text>
            ))}
          </View>

          <Text style={styles.content}>{newsDetail.content}</Text>

          <View style={styles.imageGrid}>
            {newsDetail.images.slice(1).map((image, index) => (
              <Image key={index} source={image} style={styles.gridImage} />
            ))}
          </View>

          <View style={styles.footer}>
            <Text style={styles.readCount}>阅读 {newsDetail.readCount}</Text>
          </View>
        </View>
      </ScrollView>
    </>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  headerImage: {
    width: '100%',
    height: 240,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
    lineHeight: 32,
    paddingHorizontal: 5,
  },
  meta: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 20,
    paddingHorizontal: 5,
    backgroundColor: 'transparent',
  },
  metaLeft: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: 'transparent',
  },
  source: {
    fontSize: 14,
    color: '#333',
    fontWeight: '500',
  },
  dot: {
    fontSize: 14,
    color: '#666',
    marginHorizontal: 5,
  },
  author: {
    fontSize: 14,
    color: '#666',
  },
  time: {
    fontSize: 14,
    color: '#999',
  },
  tags: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    marginBottom: 20,
    backgroundColor: 'transparent',
  },
  tag: {
    fontSize: 12,
    color: '#0066cc',
    backgroundColor: '#e6f0f9',
    paddingHorizontal: 8,
    paddingVertical: 4,
    borderRadius: 4,
    marginRight: 8,
    marginBottom: 8,
  },
  content: {
    fontSize: 16,
    lineHeight: 26,
    color: '#333',
    marginBottom: 20,
    paddingHorizontal: 5,
  },
  imageGrid: {
    flexDirection: 'row',
    marginBottom: 25,
    paddingHorizontal: 5,
    backgroundColor: 'transparent',
  },
  gridImage: {
    flex: 1,
    height: 120,
    marginHorizontal: 5,
    borderRadius: 8,
  },
  footer: {
    borderTopWidth: 1,
    borderTopColor: '#f0f0f0',
    paddingTop: 15,
    backgroundColor: 'transparent',
  },
  readCount: {
    fontSize: 14,
    color: '#999',
    textAlign: 'center',
  },
});
